<template>
  <div class="enterInfo">
    <img class="backImg" :src="imgSrc" alt="..." @mouseenter="enterImg()" @mouseleave="leaveImg()" @click="clickImg" >
    <div class="titleDiv">请确定学生完成毕设的情况：</div>
    <el-steps :active="sucNum" finish-status="success" align-center>
      <el-step title="选题" :description="allowWordOne"></el-step>
      <el-step title="初期" :description="allowWordTwo"></el-step>
      <el-step title="中期" :description="allowWordThree"></el-step>
      <el-step title="后期" :description="allowWordFour"></el-step>
    </el-steps>

<!-- 文件下载按钮 -->
    <div class="fileDiv">
      <el-button type="primary" @click="getfileData('初期')">文件下载</el-button>
      <el-button type="primary" @click="getfileData('中期')">文件下载</el-button>
      <el-button type="primary" @click="getfileData('后期')">文件下载</el-button>
    </div>

<!-- 选择下拉框 -->
    <div class="selectDiv" v-if="showselectDiv">
      <el-select v-model="valueOne" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-select v-model="valueTwo" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-select v-model="valueThree" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-select v-model="valueFour" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </div>

<!-- 确定按钮 -->
    <div class="btnDiv" v-if="showselectDiv">
      <el-button type="primary" @click="sureMessage(1)">确定</el-button>
      <el-button type="primary" @click="sureMessage(2)">确定</el-button>
      <el-button type="primary" @click="sureMessage(3)">确定</el-button>
      <el-button type="primary" @click="sureMessage(4)">确定</el-button>
    </div>

<!-- 录入成绩html -->
    <div v-if="showselectDiv">
      <div class="titleDiv wordStyle">录入学生毕设的成绩：</div>
      <div class="inputDiv">
        <div class="wordDiv">该学生毕设的成绩：{{stuGrade}}</div>
        <el-input
          placeholder="请输入成绩"
          v-model="inputDate"
          style="width: 35%"
          clearable>
        </el-input>
        <el-button type="primary" @click="sureMessage(5)">确定</el-button>
      </div>
    </div>
    
  </div>
</template>

<script>
import { axiosRequest } from "@/utils/axiosRequest";
import axios from "@/api/http.js";
export default {
  data() {
    var userInfo = JSON.parse(window.sessionStorage.getItem('userInfo')).user;
    return {
      listRoles: userInfo.roles[0], //当前登录的信息
      listNum: userInfo.loginCode, //当前登录的信息
      imgSrc: require("../../assets/img/back1.svg"),
      // 步骤UI组件
      activeNum: 0,
      allowWordOne: "",
      allowWordTwo: "",
      allowWordThree: "",
      allowWordFour: "",
      // 下拉框
      options: [{
          value: '通过',
          label: '通过'
        }, {
          value: '不通过',
          label: '不通过'
      }],
      valueOne: '',
      valueTwo: '',
      valueThree: '',
      valueFour: '',
      showselectDiv: true,
      formOne: {
        topicStep: '',
        firstStep: '',
        interimStep: '',
        laterStep: '',
      },
      inputDate: '',
      stuGrade: '',
      newfileArray: {},
    }
  },

  methods: {
    //得到文件导出数据
    getfileData(i) {
      console.log(this.newfileArray,i);
      var newShuZu = [];
      newShuZu.push(this.newfileArray);
      if(this.newfileArray.length !== 1){
          this.newfileArray = newShuZu.find( function(item) {
              return item.fileSign == i;
            })
      }
      let queryParams = {
        fileName: this.newfileArray.fileName,
      }
      axios({
          method: "get", // 如果是get方法，则写“GET”
          url: "/fileInfo/downLoadFile",
          params: queryParams,
          responseType: "blob"
      }).then(res => {
              let blob = new Blob([res.data], {
                  type: "application/msword" //这里需要根据不同的文件格式写不同的参数
              });
              let eLink = document.createElement("a");
              eLink.download = this.newfileArray.fileName; //这里需要自己给下载的文件命名
              eLink.style.display = "none";
              eLink.href = URL.createObjectURL(blob);
              document.body.appendChild(eLink);
              eLink.click();
              URL.revokeObjectURL(eLink.href);
              document.body.removeChild(eLink);
          }).catch(err => {
            console.log(err);
          });
    },

     // 鼠标移入返回图片事件
    enterImg() {
      var self = this;
      self.imgSrc = require("../../assets/img/back2.svg")
    },

    // 鼠标移出返回图片事件
    leaveImg() {
      var self = this;
      self.imgSrc = require("../../assets/img/back1.svg");
    },

    // 点击返回图片事件
    clickImg() {
      window.history.back();
    },

    // 确定按钮事件
    sureMessage(i) {
      var self = this;
      switch(i){
        case 1:
          self.formOne.topicStep = self.valueOne;
          break;
        case 2:
          self.formOne.firstStep = self.valueTwo;
          break;
        case 3:
          self.formOne.interimStep = self.valueThree;
          break;
        case 4:
          self.formOne.laterStep = self.valueFour;
          break;
        case 5:
          self.formOne.topicGrade = self.inputDate;
          break;
      }
      const newForm = self.formOne;
      axiosRequest("post","/topicInfo/save",newForm).then((res) => {
            if (res.data.code === 200) {
                self.inputDate = '';
                self.gettableList();
                self.$message({
                  showClose: true,
                  message: '确定信息成功！！！',
                  type: 'success'
                });
            } else {
                self.$message({
                  showClose: true,
                  message: '取消失败，请求信息失败了！！！',
                  type: 'error'
                });
              }
          });
    },

    // 请求文件数据
    getfileList() {
      var self = this;
      const numNew = self.$route.params.newStuNum;
      // console.log(numNew);
      axiosRequest("get","/fileInfo/listAll", null).then((res) => {
          if (res.data.code === 200) {
            console.log(res)
            self.newfileArray = res.data.data.find( function(item) {
              return item.stuNum == numNew;
            })
            console.log(self.newfileArray,'00000');
          } else {
            self.$message({
              showClose: true,
              message: '错了哦，请求信息失败了！！！',
              type: 'error'
            });
            }
        });
    },

    // 请求后台题目数据
    gettableList() {
      var self = this;
      const newId = self.$route.params.id;
      axiosRequest("get","/topicInfo/"+newId).then((res) => {
          if (res.data.code === 200) {
              self.formOne = res.data.data;
              // console.log(self.formOne,'35');
              self.allowWordOne = self.formOne.topicStep;
              self.allowWordTwo = self.formOne.firstStep;
              self.allowWordThree = self.formOne.interimStep;
              self.allowWordFour = self.formOne.laterStep;
              self.stuGrade = self.formOne.topicGrade;
          } else {
              self.$message({
                showClose: true,
                message: '错了哦，请求信息失败了！！！',
                type: 'error'
              });
            }
        });
    },
  },

  computed: {
    sucNum() {
      var self = this;
      var goNext = true;
      if(self.allowWordOne == "通过"){
          self.activeNum++;
          if(self.allowWordTwo == "通过" && goNext == true){
            self.activeNum++;
            if(self.allowWordThree == "通过" && goNext == true){
              self.activeNum++;
              if(self.allowWordFour == "通过"){
                self.activeNum++;
              }else{
                self.activeNum = 3;
                goNext = false;
                // console.log(4);
              }
            }else{
              self.activeNum = 2;
              goNext = false;
              // console.log(3);
            }
          }else{
            self.activeNum = 1;
            goNext = false;
            // console.log(2);
          }
      }else {
        self.activeNum = 0;
        goNext = false;
        // console.log(1);
      }

      return self.activeNum;
    }
  },

  mounted: function(){
    var self = this;
    self.gettableList();
    self.getfileList();
    if(self.listRoles == 2){
      self.showselectDiv = false;
    }
  },
}
</script>

<style lang="less" scoped>
.enterInfo {
  padding-left: 10px;
  position: relative;
}

.backImg {
  width: 30px;
  height: 30px;
  margin-left: 10px;
  margin-top: 10px;
  cursor: pointer;
}

.el-steps {
  margin-top: 25px;
}

.titleDiv {
  margin-top: 20px;
  font-size: 18px;
  font-weight: 600;
}

.wordStyle {
  margin-top: 50px;
}

.fileDiv {
  margin-top: 5px;
  width: 75%;
  float: right;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.selectDiv,.btnDiv {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  margin-top: 50px;
}

.el-button {
  padding: 8px 15px;
}

.inputDiv {
  width: 45%;
  margin-top: 25px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.wordDiv {
  font-size: 18px;
  font-weight: 500;
}

</style>
